<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="demo1">
        <ph-divider>单选模式</ph-divider>
        <ph-tree
          flex="0 0 300px"
          :nodes="tree1"
          :checkable="false"
          @select="onSelect1"
          :structured="false"
        ></ph-tree>
        <ph-pretty>{{ demo1 }}</ph-pretty>
        <ph-blockquote>{{ result1 }}</ph-blockquote>
      </ph-tab-panel>
      <ph-tab-panel title="demo2">
        <ph-divider>多选模式 checkable:true</ph-divider>
        <ph-tree
          flex="0 0 300px"
          :nodes="tree2"
          :checkable="true"
          @select="onSelect2"
        ></ph-tree>
        <ph-pretty>{{ demo2 }}</ph-pretty>
        <ph-blockquote>{{ result2 }}</ph-blockquote>
      </ph-tab-panel>
      <ph-tab-panel title="demo3">
        <ph-divider>单选模式:return-pid="true"</ph-divider>
        <ph-tree
          flex="0 0 300px"
          :nodes="tree2"
          :checkable="false"
          :return-pid="true"
          @select="onSelect2"
        ></ph-tree>
        <ph-pretty>{{ demo3 }}</ph-pretty>
        <ph-blockquote>{{ result2 }}</ph-blockquote>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="测试数据">
        <ph-pretty lang="json">{{ testData }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import {
  PhTree,
  PhDivider,
  PhBlockquote,
  PhTab,
  PhTabPanel,
  PhView,
} from "@/index";
import * as Datas from "../data/tree";
export default defineComponent({
  setup() {
    const data = reactive<Record<string, unknown>>({
      result1: [],
      result2: [],
      values: ["1-1", "1-2-1"],
      tree1: [
        {
          id: 1,
          name: "海淀区",
        },
        {
          pid: 1,
          id: "1-1",
          name: "知春路",
        },
        {
          pid: 1,
          id: "1-2",
          name: "知春里",
        },
        {
          pid: 1,
          id: "1-3",
          name: "上地",
        },
        {
          pid: "1-2",
          id: "1-2-1",
          name: "厕所",
        },
      ],
      tree2: [
        {
          id: 0,
          name: "北京市",
          children: [
            {
              pid: 0,
              id: 1,
              name: "海淀区",
              children: [
                {
                  pid: 1,
                  id: "1-1",
                  name: "知春路",
                },
                {
                  pid: 1,
                  id: "1-2",
                  name: "知春里",
                },
                {
                  pid: 1,
                  id: "1-3",
                  name: "上地",
                },
              ],
            },
            {
              pid: 0,
              id: 2,
              name: "朝阳区",
              children: [
                {
                  pid: 2,
                  id: "2-1",
                  name: "望京",
                },
                {
                  pid: 2,
                  id: "2-2",
                  name: "望京西",
                },
              ],
            },
          ],
        },
        {
          id: 9,
          name: "天津市",
          children: [
            {
              pid: 9,
              id: "9-1",
              name: "望京",
            },
            {
              pid: 9,
              id: "9-2",
              name: "望京西",
            },
          ],
        },
      ],
    });
    const onSelect1 = (ids: Array<string | number>) => {
      data.result1 = ids;
    };
    const onSelect2 = (ids: Array<string | number>) => {
      data.result2 = ids;
    };
    return { ...Datas, ...toRefs(data), onSelect1, onSelect2 };
  },
  components: { PhTree, PhDivider, PhBlockquote, PhTab, PhTabPanel, PhView },
});
</script>
